<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="popuUpBpx">
		<view class="status_bar"></view>
		<!-- 语言切换 -->
		<!-- 		<view class="languageBox">
			<view class="languageBoxitem" v-for="(item, index) in languageList" :key="index" @tap="languageBtn(item)">
				<view style="font-size: 18px; padding: 0 8px; margin: 0 3px;" :class="languageFlag === item.language ? 'languageColor' : ''">{{ item.text }}</view>
				<view style="transform:translateY(3px); margin: 0 5px;" v-show="index !== languageList.length - 1">|</view>
			</view>
		</view> -->
		<!-- 折叠面板 -->
		<view>
			<view class="userBox">
				<!-- <uni-icons type="contact-filled" color="#fff" size="50"></uni-icons> -->
				<image style="width: 50px; height: 50px;" src="/static/icon/superAnt/unity3d@2x(11).png" mode=""></image>
				<view class="">{{ loginTextTwo }}</view>
			</view>
			<view class="notificationBox" @tap="goUser">
				<view class="notificationBoxTitle">
					<uni-icons type="contact-filled" :color="notificationShow ? '#fff' : '#DC4D60'" size="25" style="margin-right: 5px;"></uni-icons>
					<text :style="{ color: notificationShow ? '#fff' : '#DC4D60' }">{{ i18n.ctwfont14 }}</text>
				</view>
				<uni-icons type="forward" :color="notificationShow ? '#fff' : '#DC4D60'" size="16"></uni-icons>
			</view>
			<view class="redLine"></view>
			<view class="notificationBox">
				<view :style="{ color: notificationShow ? '#fff' : '#DC4D60' }">{{ i18n.ctwfont15 }}</view>
				<switch :checked="notificationChecked" :disabled="!notificationShow" color="#64C882" @change="notificationChang" style="transform:scale(0.7)" />
			</view>
			<view class="redLine"></view>
			<view class="notificationBox">
				<view>
					<uni-icons type="flag" color="#fff" size="25" style="margin-right: 5px;"></uni-icons>
					{{ i18n.ctwfont16 }}
				</view>
				<view class="languageBoxitemgai">
					<view v-for="(item, index) in languageList" :key="index" @tap="languageBtn(item)">
						<view style="font-size: 12px; padding: 0 5px;" :class="languageFlag === item.language ? 'languageColorgai' : ''">{{ item.text }}</view>
					</view>
				</view>
			</view>
			<view class="redLine"></view>
		</view>
		<!-- 底部 -->
		<view class="languageBottom">
			<view class="languageBottomBtn">
				<view style="display: flex; align-items: center;" @tap="goMePages">
					<uni-icons v-if="notificationShow" style="margin-top: 5px;" type="minus-filled" color="#fff" size="25"></uni-icons>
					<image v-else style="width: 25px; height: 25px;" src="/static/icon/superAnt/unity3d@2x(7).png" mode=""></image>
					<text class="languageBottomBtnTitle">{{ loginText }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { setStorage, getStorage } from '@/utils/setStorage.js';
import { baseUrl } from '@/utils/http.js';
import LanguageConfig from '@/i18n/LanguageConfig';
import { loadFontFace } from '@/utils/loadFontFaceBox.js';
// import { setFontSize } from '@/utils/langeuageBaseFont.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			languageList: [
				{
					text: 'EN',
					language: 'en'
				},
				{
					text: 'TH',
					language: 'th'
				},
				{
					text: 'CN',
					language: 'zh'
				}
			],
			languageFlag: 'th',
			notificationChecked: false, // 默认开关
			notificationShow: false // 是否显示推送开关
		};
	},
	created() {
		this.languageSwitch();
		const token = getStorage('token');
		if (token) {
			this.notificationShow = true;
			this.notificationList();
		} else {
			this.notificationShow = false;
		}
	},
	computed: {
		i18n() {
			return this.$t('setUpPages');
		},
		loginText() {
			const token = getStorage('token');
			let text = '';
			if (token === undefined || token === null || token === '') {
				text = this.$t('setUpPages').ctwfont6;
			} else {
				text = this.$t('setUpPages').ctwfont13;
			}
			return text;
		},
		loginTextTwo() {
			const token = getStorage('token');
			let text = '';
			if (token === undefined || token === null || token === '') {
				text = this.$t('setUpPages').ctwfont6;
			} else {
				const user = JSON.parse(getStorage('userconter'));
				text = user.customerCode;
			}
			return text;
		}
	},
	methods: {
		// 每次进入时判断
		languageSwitch() {
			this.languageFlag = getStorage('language') || 'th';
			this.collapseItem = 0;
		},
		languageBtn(val) {
			// if (this.languageFlag == 'zh') {
			// 	const sizeNum = uni.getStorageSync('root_font_size');
			// 	if (sizeNum == '14px') {
			// 		setFontSize(val.language, '16px');
			// 	} else {
			// 		setFontSize(val.language);
			// 	}
			// } else {
			// 	setFontSize(val.language);
			// }
			this.languageFlag = val.language;
			LanguageConfig.isExist(val.language);
			this.$i18n.locale = val.language;
			setStorage('language', val.language);
			this.$store.commit('SET_TABBARINFOTYPE', [
				{
					pagePath: '/pages/home/index',
					iconPath: '/static/icon/AboutUs/2x/ic_01_u@2x.png',
					selectedIconPath: '/static/icon/AboutUs/2x/AboutUs8@2x.png',
					text: this.$t('tabBar').home,
					raisede: false,
					info: '',
					dot: false
				},
				{
					pagePath: '/pages/maps/orderTracking',
					iconPath: '/static/icon/AboutUs/2x/ic_02_u@2x.png',
					selectedIconPath: '/static/icon/AboutUs/2x/AboutUs9@2x.png',
					text: this.$t('tabBar').home2,
					raisede: false,
					info: '',
					dot: false
				},
				{
					pagePath: '/pages/maps/index',
					iconPath: '/static/icon/AboutUs/2x/ic_03@2x.png',
					selectedIconPath: '/static/icon/AboutUs/2x/AboutUs10@2x.png',
					text: this.$t('tabBar').home3,
					raisede: false,
					info: '',
					dot: false
				},
				{
					pagePath: '/pages/businessCard/index',
					iconPath: '/static/icon/AboutUs/2x/ic_my_u@2x.png',
					selectedIconPath: '/static/icon/AboutUs/2x/AboutUs11@2x.png',
					text: this.$t('tabBar').home4,
					raisede: false,
					info: '',
					dot: false
				}
			]);
			// 加载字体包
			this.$nextTick(function() {
				loadFontFace();
			});
			this.$emit('closePopUp', true);
		},
		goMePages() {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				this.$emit('closePopUp', true);
				this.$emit('showLoginBoxT', true);
				setStorage('showLoginBox', true);
				// #ifdef APP-PLUS
				uni.redirectTo({
					url: '/pages/home/index'
				});
				// #endif
				// #ifdef H5
				this.$Router.push('/pages/home/index');
				// #endif
			} else {
				this.$emit('closePopUp', false);
				// this.$emit('closePopUp', true);
				// // #ifdef APP-PLUS
				// uni.redirectTo({
				// 	url: '/pages/me/index'
				// });
				// // #endif
				// // #ifdef H5
				// this.$Router.push('/pages/me/index');
				// // #endif
			}
		},
		// async goLogin(e) {
		// 	const token = getStorage('token');
		// 	if (token === undefined || token === null || token === '') {
		// 		this.$emit('closePopUp', false);
		// 		// #ifdef APP-PLUS
		// 		uni.redirectTo({
		// 			url: `/pages/logins/phone`
		// 		});
		// 		// #endif
		// 		// #ifdef H5
		// 		this.$Router.push(`/pages/logins/phone`);
		// 		// #endif
		// 	} else {
		// 		this.$emit('closePopUp', false);
		// 	}
		// },
		// 去个人信息
		goUser() {
			const token = getStorage('token');
			if (token) {
				this.$emit('closePopUp', true);
				setTimeout(() => {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/me/modifyMail'
					});
					// #endif
				}, 500);
			}
		},
		// 获取推送开关值
		async notificationList() {
			const { data: res } = await this.$http(true, 'api/customer/pushMessageSwitch', '', 'GET');
			if (res.errno === 0) {
				this.notificationChecked = res.data == 0 ? true : false;
			} else {
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 推送开关
		async notificationChang(e) {
			const params = e.detail.value ? 0 : 1; // phone
			const { data: res } = await this.$http(true, `api/customer/pushMessageSwitch/update?pushSwitch=${params}`, '', 'POST');
			if (res.errno === 0) {
				this.notificationList();
			} else {
				this.notificationChecked = !e.detail.value;
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-collapse-cell--open {
	background-color: #fff;
}
::v-deep .uni-collapse-cell--hide {
	height: 48px !important;
}
::v-deep .uni-collapse-cell {
	border: none;
	box-shadow: none !important;
	margin-bottom: 0 !important;
}
::v-deep .uni-collapse-cell__title:active {
	background-color: #fff;
}
::v-deep .uni-collapse-cell__title {
	height: 48px !important;
	line-height: 24px !important;
	padding: 12px;
	justify-content: flex-start;
}
::v-deep .uni-collapse-cell__title-text {
	// font-size: 16px;
	font-size: $uni-font-size-custom-e;
	font-weight: 600;
	color: #474956;
	flex: none;
}
::v-deep .uni-collapse-cell__title-arrow {
	margin-left: 5px;
}
.popuUpBpx {
	position: fixed;
	top: 0;
	right: 0;
	width: 60%;
	background-color: #cd001b;
	height: 60%;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #cd001b;
		width: 100%;
	}
	.languageBox {
		height: 30px;
		font-size: $uni-font-size-custom-d;
		color: #e3e3e3;
		display: flex;
		align-items: center;
		justify-content: center;
		.languageBoxitem {
			display: flex;
		}
		.languageColor {
			background-color: #84aace;
			color: #fff;
			border-radius: 5px;
		}
	}
	.userBox {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 28px;
		color: #fff;
		padding: 80rpx 0;
	}
	.notificationBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 38rpx 30px;
		font-size: $uni-font-size-custom-d;
		color: #fff;
		.notificationBoxTitle {
			display: flex;
			align-items: center;
		}

		.languageBoxitemgai {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			.languageColorgai {
				background-color: #f77687;
				color: #fff;
				border-radius: 10px;
			}
		}
	}
	.redLine {
		width: 80%;
		height: 1px;
		background-color: #e24c5e;
		margin: 0 auto;
	}
	.languageBottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		.languageBottomBtn {
			// height: 180px;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx 15px;
			box-sizing: border-box;
			.languageBottomBtnTitle {
				font-size: $uni-font-size-custom-g;
				color: #fff;
				margin-left: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //多行在这里修改数字即可
				overflow: hidden;
				-webkit-box-orient: vertical;
			}
		}
	}
}
</style>
